<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="filters" label-width="80px">
                <el-form-item prop="dateArr">
                    <el-date-picker
                            v-model="filters.dateArr" type="daterange" start-placeholder="合同生效日" end-placeholder="合同生效日"
                            placeholder="选择时间范围" value-format="yyyy-MM-dd" @change="handleDateChange">
                    </el-date-picker>
                </el-form-item>

                <el-form-item prop="product_id">
                    <el-select
                            placeholder="产品名称" clearable v-model="filters.product_id" size="18px">
                        <el-option :key="item.id" :label="item.product_name" :value="item.id"
                                   v-for="item in productData"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item prop="state">
                    <el-select
                            placeholder="合同状态" clearable v-model="filters.state" size="18px">
                        <el-option :key="value" :label="txt" :value="value"
                                   v-for="(txt, value) in this.options.contract_state"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="sale_department_id">

                    <el-select clearable placeholder="部门" @change="changeDepartmenty"
                               v-model="filters.sale_department_id" @clear="clearGroup">
                        <el-option :key="item.id" :label="item.department_name" :value="item.id"
                                   v-for="item in departmentTree"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="sale_team_id">
                    <el-select
                            placeholder="组别" clearable v-model="filters.sale_team_id" size="18px">
                        <el-option :key="item.id" :label="item.team_name" :value="item.id"
                                   v-for="item in teamTree"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="sale_name">
                    <el-input
                            placeholder="销售姓名"
                            v-model.trim="filters.sale_name">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getAchievement">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('filters')">重置</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button @click="exportExcel">导出</el-button>
                </el-form-item>
            </el-form>
        </el-col>


        <!--数据列表-->
        <el-table
                :data="tableData"
                stripe
                v-loading="listLoading"
                show-summary
                :summary-method="getSummaries"
                style="width: 100%">
            <el-table-column
                    prop="sale_department_name"
                    label="部门">
            </el-table-column>
            <el-table-column
                    prop="sale_team_name"
                    label="组别">
            </el-table-column>
            <el-table-column
                    prop="sale_position_name"
                    label="职位">
            </el-table-column>
            <el-table-column
                    prop="sale_name"
                    label="销售姓名">
            </el-table-column>
            <el-table-column
                    prop="contraction_count"
                    label="合同数量">
            </el-table-column>
            <el-table-column
                    :formatter="formatterAmount"
                    label="合同总额">
            </el-table-column>
        </el-table>


        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <!--分页-->
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_no"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import * as api from '../../api/achievement_api';
    import dict from "../../common/js/dict";
    import * as sale_api from '../../api/sale_api';
    import * as product_api from '../../api/product_api'
    import * as commons from '../../common/js/commons';
    import * as date from "../../common/js/date"
    import {fileDownload} from '../../common/js/download';

    export default {
        name: "list",
        data() {
            return {
                productData: [],
                companyTree: [],
                departmentTree: [],
                teamTree: [],
                //搜索条件
                filters: {
                    product_id: "",
                    state: "",
                    sale_department_id: "",
                    sale_team_id: "",
                    sale_name: '',
                    dateArr: [],
                    start_date: '',
                    end_date: ''
                },
                options: {
                    contract_state: dict.contract_state
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_no: 1
                },
                //表格数据
                tableData: [],
                statistics: {
                    contract_total: 0,
                    contract_amount_total: 0
                },
                listLoading: false
            };
        },
        methods: {
            formatterAmount(row) {
                if(row.contraction_amount_sum)
                {
                    return (row.contraction_amount_sum / 100);
                }
                return '';
            },
            handleDateChange(val) {
                this.filters.start_date = val[0];
                this.filters.end_date = val[1];
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_no = 1;
                this.pager.page_size = val;
                this.getAchievementList();
            },
            //分页page_no发生改变
            handleCurrentChange(val) {
                this.pager.page_no = val;
                this.getAchievementList();
            },
            //根据条件搜索业绩
            getAchievement() {
                this.pager.page_no = 1;
                this.getAchievementList();
            },
            //根据条件搜索业绩数据-实体方法
            getAchievementList() {


                let condition = {
                    start_date: date.dateStart(this.filters.start_date),
                    end_date: date.dateEnd(this.filters.end_date),
                    product_id: this.filters.product_id,
                    state: this.filters.state,
                    sale_department_id: this.filters.sale_department_id,
                    sale_team_id: this.filters.sale_team_id,
                    sale_name: this.filters.sale_name,
                };
                let params = {
                    page_size: this.pager.page_size,
                    page_no: this.pager.page_no,
                    condition: condition
                };
                this.listLoading = true;  //显示loading
                api.achievementList(params).then((res) => {
                    this.listLoading = false;  //隐藏loading
                    if (res.status == 200) {
                        let data = JSON.parse(res.data.datas);
                        this.statistics = data.statistics;
                        this.tableData = data.items;
                        this.pager.total = data.total;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message(res.data.msg);
                    }
                });
            },
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    else if (index == 4) {
                        sums[index] = this.statistics.contract_total;
                        return;
                    }
                    else if (index == 5) {
                        if (this.statistics.contract_amount_total) {
                            sums[index] = this.statistics.contract_amount_total / 100;
                        }
                        else {
                            sums[index] = "";
                        }
                        return;
                    }
                    else {
                        sums[index] = '';
                        return;
                    }
                });

                return sums;
            },
            exportExcel() {

                let condition = {
                    start_date: date.dateStart(this.filters.start_date),
                    end_date: date.dateEnd(this.filters.end_date),
                    product_id: this.filters.product_id,
                    state: this.filters.state,
                    sale_department_id: this.filters.sale_department_id,
                    sale_team_id: this.filters.sale_team_id,
                    sale_name: this.filters.sale_name,
                };
                api.achievementExport(condition).then((res) => {
                    if (res.status == 200) {
                        fileDownload(res, this);
                    } else {
                        if (res.data.status == 401) {
                            // this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                }).catch((e) => {
                    this.$message({
                        type: 'info',
                        message: e.message
                    });
                });
            },
            //重置搜索表单
            resetForm(formName) {
                this.filters.start_date = "";
                this.filters.end_date = "";
                this.$refs[formName].resetFields();
                this.filters.page_no = 1;
                //this.getAchievementList();
                this.tableData = [];
            },
            //部门/组联动
            initTreeData() {     //从 服务器获取数据
                sale_api.getDepartmentList().then((res) => {
                    if (res.data.status == 200) {
                        let raw_tree_list = JSON.parse(res.data.datas);

                        if (raw_tree_list) {
                            this.tree_data = raw_tree_list;
                            this.companyTree = raw_tree_list.children;
                            this.departmentTree = commons.getnewjson(this.companyTree);
                        }
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            },
            changeDepartmenty(val) {
                this.filters.sale_team_id = "";
                for (var j = 0, len = this.departmentTree.length; j < len; j++) {
                    let department = this.departmentTree[j];

                    if (department.id == val) {
                        if (department.children) {
                            this.teamTree = department.children;
                            this.filters.group = '';
                        } else {
                            this.teamTree = '';
                        }
                    }
                }
            },
            clearGroup() {
                this.teamTree = "";
            },
            //产品列表
            initProductData() {
                let params = {
                    page_size: 50,
                    page_no: 1,
                    condition: {}
                };

                product_api.productList(params).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        this.listLoading = false;  //隐藏loading
                        this.productData = result.items;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            },
            //初始化页面
            initData() {
                this.initTreeData();
                this.initProductData();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();  //初始化页面数据
            })

        }
    }
</script>

<style scoped>

</style>